<template>
  <section>
    <div v-for="item in AraeInfoColumn" :key="item.value">
      <img :src="item.icon" alt="" />
      <div>{{ `${areaInfoData[item.value]}${item.value === 'acreage' ? '平方公里' : ''}` }}</div>
      <div>{{ item.label }}</div>
    </div>
  </section>
</template>

<script setup lang="ts">
  import { AraeInfoColumn } from './indexConfig'

  interface Props {
    areaInfoData: Record<string, any>
  }

  withDefaults(defineProps<Props>(), {
    areaInfoData: () => ({
      acreage: '320',
      weather: '晴/8°',
      planeNumber: 1,
      shipNumber: 0
    })
  })
</script>

<style lang="less" scoped>
  section {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
    gap: 20px;
    background: linear-gradient(180deg, rgba(209, 234, 255, 0.8), #ffffff);
    border: 1px solid #ffffff;
    border-radius: 4px;
    padding: 20px;

    & > div {
      position: relative;
      display: grid;
      grid-template-columns: 34px auto;
      grid-template-rows: repeat(2, auto);
      background: linear-gradient(180deg, #0040ae, rgba(0, 131, 255, 0.4));
      border: 1px solid #ffffff;
      border-top: 4px solid #00f5ff;
      border-bottom: 4px solid #00f5ff;
      padding: 10px 20px;
      color: #fff;

      &::before {
        content: '';
        position: absolute;
        top: -3px;
        left: 50%;
        transform: translate(-50%);
        width: 85%;
        height: 4px;
        z-index: 9;
        background-color: #0040ae;
      }

      img {
        grid-area: 1 / 1 / 3 / 2;
        width: 24px;
        height: 24px;
      }

      & > div:nth-child(2) {
        font-size: 16px;
        text-shadow: 0px 0px 6px 0px #0065c4;
      }

      & > div:nth-child(3) {
        font-size: 12px;
      }
    }
  }
</style>
